<template>
  <div class="">
    <div id="echarts" :key="timeStamp"></div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from 'vue'

const internalInstance = getCurrentInstance()
const timeStamp = new Date().getTime() // 以返回的方式到当前页面  echarts图不会渲染  换一个key即可
const renderEchart = () => {
  const echarts = internalInstance.appContext.config.globalProperties.$echarts
  var myChart = echarts.init(document.getElementById('echarts'))
  const option = {
    grid: {
      left: '17%',
      right: '5%'
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        symbol: 'none',
        data: [1,2,2,3,4,5,6,7,7,7,7,8,9,90],
        type: 'line',
        smooth: true
      }
    ]
  }
  myChart.setOption(option)
}
onMounted(() => {
  renderEchart()
})
</script>

<style lang="scss" scoped>
#echarts {
  width: 100%;
  height: 280px;
  margin: -40px 0 -50px 0;
}
</style>
